<!-- @chenqin
<map-init mapId="map" :positionPicker="false" :lng="lng" :lat="lat" :isinitmap="isinitmap" mapHeight="500px" scale="10" @mapOk="mapOk"></map-init>
-->
<template>
    <div style="position: relative">
        <div style="margin-bottom: 10px;position: absolute;z-index: 1000;bottom: 0px;right: 10px" v-if="driverList.localtion.length > 0">
        <el-button type="primary" @click="startAnimation">轨迹回放</el-button>
        <el-button type="primary" @click="pauseAnimation">轨迹暂停</el-button>
        <el-button type="primary" @click="resumeAnimation">轨迹恢复</el-button>
        <!--<el-button type="primary" @click="addAnimation">加速</el-button>-->
        </div>
        <div id='guiji-map' class="map" :style="{'min-height':mapHeight}" tabindex="0"></div>
    </div>
</template>

<script>
    import {lazyAMapApiLoaderInstance} from 'vue-amap';

    export default {
        props: {
            isinitmap: {
                type: Boolean
            },
            mapHeight: {
                type: Number | String,
                default: '400px'
            },
            mapStyle: {
                type: String,
                default: 'amap://styles/whitesmoke'
            },
            driverListData: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        data() {
            return {
                lineArr: [
                    [116.478935, 39.997761],
                    [116.478939, 39.997825],
                    [116.478912, 39.998549],
                    [116.478912, 39.998549],
                    [116.478998, 39.998555],
                    [116.478998, 39.998555],
                    [116.479282, 39.99856],
                    [116.479658, 39.998528],
                    [116.480151, 39.998453],
                    [116.480784, 39.998302],
                    [116.480784, 39.998302],
                    [116.481149, 39.998184],
                    [116.481573, 39.997997],
                    [116.481863, 39.997846],
                    [116.482072, 39.997718],
                    [116.482362, 39.997718],
                    [116.483633, 39.998935],
                    [116.48367, 39.998968],
                    [116.484648, 39.999861]
                ],
                points: [
                    {
                        name: "点a",
                        lnglat: [116.478935, 39.997761],
                    }, {
                        name: "点b",
                        lnglat: [116.478939, 39.997825],
                    }, {
                        name: "点c",
                        lnglat: [116.478912, 39.998549],
                    }, {
                        name: "点d",
                        lnglat: [116.478912, 39.998549],
                    }, {
                        name: "点e",
                        lnglat: [116.478998, 39.998555],
                    }, {
                        name: "点f",
                        lnglat: [116.478998, 39.998555],
                    }, {
                        name: "点g",
                        lnglat: [116.479282, 39.99856],
                    }, {
                        name: "点h",
                        lnglat: [116.479658, 39.998528],
                    }, {
                        name: "点i",
                        lnglat: [116.480151, 39.998453],
                    }, {
                        name: "点j",
                        lnglat: [116.480784, 39.998302],
                    }, {
                        name: "点k",
                        lnglat: [116.480784, 39.998302],
                    }, {
                        name: "点l",
                        lnglat: [116.481149, 39.998184],
                    }, {
                        name: "点l",
                        lnglat: [116.481573, 39.997997],
                    }, {
                        name: "点l",
                        lnglat: [116.481863, 39.997846],
                    }, {
                        name: "点l",
                        lnglat: [116.482072, 39.997718],
                    }, {
                        name: "点l",
                        lnglat: [116.482362, 39.997718],
                    }, {
                        name: "点l",
                        lnglat: [116.48367, 39.998968],
                    }, {
                        name: "点l",
                        lnglat: [116.484648, 39.999861]
                    }],
                pathSimplifierIns: null,
                driverImg: null,
                speed: 2000, // 速度
                isGuiJi: false,
                map: null,
                marker: null,
                location: null,
                PathSimplifier: null
            };
        },
        computed: {
            // isinitmap: function (val, old) {
            //     if (this.map) {
            //         if (
            //             typeof this.lng !== 'undefined' && this.lat !== null &&
            //             typeof this.lat !== 'undefined' && this.lat !== null &&
            //             Number(this.lng) !== 0 &&
            //             Number(this.lat) !== 0
            //         ) {
            //             // debugger;
            //             this.map.setCenter(new AMap.LngLat(this.lng, this.lat));
            //         } else {
            //             this.map.setCenter(new AMap.LngLat(116.397428, 39.90923));
            //         }
            //     }
            // }
            driverList() {
              return this.driverListData;
            }
        },
        watch: {
            driverList: {
                handler(val) {
                    if (!window.pathSimplifierIns) {
                        // console.info('adfadfasdf');
                        pathSimplifierIns.setData([]);
                    }
                },
                deep: true
            }
        },
        mounted() {
            setTimeout(() => {
                this.initMap();
            }, 500)
        },

        methods: {
            // 实例化地图
            initMap() {
                const self = this;
                lazyAMapApiLoaderInstance.load().then(() => {
                    let center = [];
                    center[0] = self.driverList.localtion.length>0 ? self.driverList.localtion[0].lon : '116.397428';
                    center[1] = self.driverList.localtion.length>0 ? self.driverList.localtion[0].lat : '39.90923';
                    //初始化地图
                    self.map = new AMap.Map("guiji-map", {
                        resizeEnable: true,
                        center: center,
                        zoom: 14
                    });
                    var map = self.map;
                    console.info('map对象', map);
                    if (self.driverList.localtion.length>0) {
                        AMapUI.load(['ui/misc/PathSimplifier'], function (PathSimplifier) {

                            if (!PathSimplifier.supportCanvas) {
                                alert('当前环境不支持 Canvas！');
                                return;
                            }
                            self.PathSimplifier = PathSimplifier;
                            var colors = [
                                "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
                                "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
                                "#651067", "#329262", "#5574a6", "#3b3eac"
                            ];
                            let driverTrack = []; //司机轨迹
                            driverTrack = self.driverList.localtion;

                            if (driverTrack && driverTrack.length > 0) {
                                //按时间排序
                                let driverTrackN = driverTrack.sort(function (a, b) {
                                    let a_date = new Date(a.created_at).getTime();
                                    let b_date = new Date(b.created_at).getTime();
                                    return b_date - a_date;

                                });

                                var points = [];
                                driverTrackN.map(function (item) {
                                    let point = {};
                                    if (item.lon && item.lat) {
                                        point = {
                                            name: item.created_at.substring(11),
                                            lnglat: [item.lon, item.lat]
                                        };
                                        points.push(point);
                                    }
                                })
                            }
                            self.pathSimplifierIns = new PathSimplifier({
                                zIndex: 100,
                                autoSetFitView: false,
                                map: map, //所属的地图实例

                                getPath: function (pathData, pathIndex) {
                                    var points = pathData.points,
                                        lnglatList = [];
                                    for (var i = 0, len = points.length; i < len; i++) {
                                        lnglatList.push(points[i].lnglat);
                                    }
                                    return lnglatList;
                                },
                                getHoverTitle: function (pathData, pathIndex, pointIndex) {
                                    if (pointIndex >= 0) {
                                        return pathData.name + '，时间' + pathData.points[pointIndex].name;
                                    }
                                    // return pathData.name + '，时间' + pathData.points.length;
                                },
                                renderOptions: {
                                    pathLineStyle: {
                                        dirArrowStyle: true
                                    },
                                    getPathStyle: function (pathItem, zoom) {

                                        var color = colors[pathItem.pathIndex % colors.length],
                                            lineWidth = Math.round(2 * Math.pow(1.1, zoom - 3));

                                        return {
                                            pathLineStyle: {
                                                strokeStyle: color,
                                                lineWidth: lineWidth
                                            },
                                            pathLineSelectedStyle: {
                                                lineWidth: lineWidth
                                            }
                                        };
                                    },
                                    renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
                                }
                            });
                            var pathSimplifierIns = self.pathSimplifierIns;
                            window.pathSimplifierIns = pathSimplifierIns;
                            //设置数据
                            pathSimplifierIns.setData([{
                                name: self.driverList.driver,
                                points: points
                            }]);
                            //选中路线0


                        })
                    }

                })
            },
            startAnimation() {
                let self = this;
                if (!self.isGuiJi) {
                    self.driverImg = self.pathSimplifierIns.createPathNavigator(0, {
                        loop: true, //循环播放
                        speed: self.speed, //巡航速度，单位千米/小时
                    });
                    console.info('driverImg', self.driverImg);
                    self.driverImg.marker = new AMap.Marker({
                        offset: new AMap.Pixel(10, -26),
                        content: '司机:' + self.driverList.driver,
                        map: self.map
                    });
                    self.driverImg.on('move', function () {
                        self.driverImg.marker.setPosition(self.driverImg.getPosition());
                        // self.map.setCenter(self.driverImg.getPosition());
                    });
                    self.driverImg.start();
                    self.isGuiJi = true;
                } else {
                    self.driverImg.marker.setMap(null);
                    self.driverImg.destroy();
                    self.map.setCenter([self.driverList.localtion[0].lon,self.driverList.localtion[0].lat])
                    self.isGuiJi = false;
                    self.driverImg = null;
                }

            },
            pauseAnimation() {
                if (this.isGuiJi) {
                    this.driverImg.pause();
                }
            },
            resumeAnimation() {
                this.driverImg.resume();
            },
            addAnimation() {
                this.speed += 500;
                console.info('速度', this.speed);
            }
        }
    };
</script>
<style lang="less" scoped>
    @import url(../map.less);

    #pickerBox {
        position: absolute;
        z-index: 9999;
        top: 10px;
        left: 20px;
        width: 300px;
    }

    .input-map {
        width: 300px;
        height: 30px;
        padding-left: 6px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    #poiInfo {
        background: #fff;
        /*width: 100%;*/
        /*height: 200px;*/
    }

    .amap_lib_placeSearch .poibox.highlight {
        background-color: #CAE1FF;
    }

    .amap_lib_placeSearch .poi-more {
        display: none !important;
    }

</style>
